 {layout name="common/layout" /}

<style>
	textarea{
		font-size: 14px;
    box-sizing: border-box;
    width: 300px;
    margin-left: 30px;
    vertical-align: middle;
    margin: 20px 0 20px 30px;
    border: 1px solid #dadada;
    border-radius: 5px;
    height: 60px;
    padding: 5px;
	}
	.update_red {
		margin-right: 2px;
	}
</style>
<div class="dislpayArrow hidden-xs"><a class="pngfix" href="javascript:void(0);" onClick="displaynavbar(this)"></a></div>

<div class="Hui-article-box" style="margin-top: 37px;">
	<div class="newCrumbs ">物流模板
		<span class="c-gray en">&gt;</span> 自提点
		<span class="c-gray en">&gt;</span> 编辑自提点
	</div>
	<div class="Hui-article" style="margin-top:20px;">

		<form action="" class="update_form">
			<div class="">
				<div class="mac-top" style="background:#f9f9f9;box-sizing:border-box;padding-left:135px;padding-bottom:50px;">
					<label for=""  >
								<span><i class="update_red">*</i>门店编号：</span>
								<input type="text" class="input-text radius size-M code" placeholder="门店编号为数字且最长支持20字符">
							</label><br>
					<label for=""  >
								<span><i class="update_red">*</i>门店名称：</span>
								<input type="text" class="input-text radius size-M named" placeholder="门店名称最长支持20字符">
							</label><br>
					<label for=""  >
								<span><i class="update_red">*</i>手机号码：</span>
								<input type="text" class="input-text radius size-M phone" placeholder="请输入手机号码">
							</label><br>
					<label for=""  >
								<span><i class="update_red">*</i>营业时间：</span>
								<textarea class="time1" rows="" cols=""></textarea><br>

					<label for="" class="">
								<span><i class="update_red">*</i>所属区域：</span>
									<select id="province" style="margin:20px 0;width: 140px;height: 28px;margin-left:30px;"></select>
									<select id="city" style="width: 140px;height: 28px;"></select>
									<select id="area" style="width: 140px;height: 28px;"></select>
							</label><br>
					<label for="" class="">
								 
								   <span><i class="update_red">*</i>详细地址：</span>
									<input id="text_" type="text" class="input-text radius size-M address" placeholder="请输入详细地址" value="">
								    <input type="button" class="btn" value="查询" onclick="searchByStationName();"/>
								
							</label>
								<br>
					<label for="" class="">
								<span style="display: inline-block;margin-top:30px;"><i class="update_red">*</i>地图定位：</span>
								<div id="container" 
										style="position: relative;
											display: inline-block;
											vertical-align: top;
									        margin-left: 36px;
								            margin-top:30px; 
								            width: 430px; 
								            height: 290px; 
								            top: 50; 
								            border: 1px solid gray;
								            overflow:hidden;">
								    </div>
							</label>
				</div>

				<div style="text-align:center;margin:50px 0px;">
					<input type="button" class="btn" onclick="up()" value="保存" style="margin:0 20px;">
					<input type="button" class="btn" value="返回" style="margin:0 20px;">	</div>
			</div>
		</form>
	</div>
</div>


<!-- <script type="text/javascript" src="style/js/jquery.provincesCity.js"></script>
<script type="text/javascript" src="style/js/provincesData.js"></script> -->
<link rel="stylesheet" type="" href="__MERCHANT_STATIC__/style/js/jquery.datetimepicker.min.css">

<script type="text/javascript" src="__BaiDuMap_STATIC__"></script>
<script language="javascript" type="text/javascript" src="__MERCHANT_STATIC__/style/js/jquery.datetimepicker.full.js"></script>
<script>
</script>
<script type="text/javascript">
$("input[value='返回']").click(function(){
	window.history.back();
});
	




	var map = new BMap.Map("container");
	map.centerAndZoom('杭州', 12);
	map.enableScrollWheelZoom(); //启用滚轮放大缩小，默认禁用
	map.enableContinuousZoom(); //启用地图惯性拖拽，默认禁用

	map.addControl(new BMap.NavigationControl()); //添加默认缩放平移控件
	map.addControl(new BMap.OverviewMapControl()); //添加默认缩略地图控件
	map.addControl(new BMap.OverviewMapControl({
		isOpen: true,
		anchor: BMAP_ANCHOR_BOTTOM_RIGHT
	})); //右下角，打开

	var localSearch = new BMap.LocalSearch(map);
	localSearch.enableAutoViewport(); //允许自动调节窗体大小
	function searchByStationName() {
		map.clearOverlays(); //清空原来的标注
		var keyword = document.getElementById("text_").value;
		localSearch.setSearchCompleteCallback(function (searchResult) {
			var poi = searchResult.getPoi(0);
			/*document.getElementById("result_").value = poi.point.lng + "," + poi.point.lat;*/
			map.centerAndZoom(poi.point, 13);
			console.log(poi);
			var marker = new BMap.Marker(new BMap.Point(poi.point.lng, poi.point.lat)); // 创建标注，为要查询的地方对应的经纬度
			map.addOverlay(marker);
			var content = document.getElementById("text_").value + "<br/><br/>经度：" + poi.point.lng + "<br/>纬度：" + poi.point.lat;
			var infoWindow = new BMap.InfoWindow("<p style='font-size:14px;'>" + content + "</p>");
			marker.addEventListener("click", function () {
				this.openInfoWindow(infoWindow);
			});
			// marker.setAnimation(BMAP_ANIMATION_BOUNCE); //跳动的动画
		});
		localSearch.search(keyword);
	}

	province();

	function province() {

		$.ajax({
			type: "get",
			url: "__MERCHANT_STATIC__/area.json",
			dataType: "json",
			async: true,
			success: function (res) {
				console.log(res.probinces);
				var str_pro = '';
				$.each(res.probinces, function (i) {

					str_pro += '<option value="' + res.probinces[i].provinceid + '">' + res.probinces[i].province + '</option>';
				});
				$("#province").html(str_pro);
				$("#province").trigger("change");
			}
		});
	}
	$("#province").change(function () {
		city($(this).val());
	})

	function city(province_id) {
		$.ajax({
			type: "get",
			url: "__MERCHANT_STATIC__/area.json",
			dataType: "json",
			async: true,
			success: function (res) {
				console.log(res.probinces);
				var str_city = '';
				$.each(res.probinces, function (i) {
					if (res.probinces[i].provinceid == province_id) {
						$.each(res.probinces[i].cities, function (j) {
							str_city += '<option value="' + res.probinces[i].cities[j].cityid + '">' + res.probinces[i].cities[j].city +
								'</option>'
						});
					}
				});
				$("#city").html(str_city);
				$("#city").trigger("change");
			}
		});
	}

	$("#city").change(function () {
		area($("#province").val(), $(this).val());
	})

	function area(province_id, city_id) {
		console.log(province_id, city_id)
		$.ajax({
			type: "get",
			url: "__MERCHANT_STATIC__/area.json",
			dataType: "json",
			async: true,
			success: function (res) {
				console.log(res);
				var str_area = '';
				$.each(res.probinces, function (i) {
					if (res.probinces[i].provinceid == province_id) {
						$.each(res.probinces[i].cities, function (j) {
							if (res.probinces[i].cities[j].cityid == city_id) {
								$.each(res.probinces[i].cities[j].areas, function (k) {
									str_area += '<option value="' + res.probinces[i].cities[j].areas[k].areaid + '">' + res.probinces[i].cities[
										j].areas[k].area + '</option>'
								});
							}
						});
					}
				});
				$("#area").html(str_area);
			}
		});
	}

	function up() {
		var code = $('.code').val();
		var named = $('.named').val();
		var phone = $('.phone').val();
		var time1 = $('.time1').val();
		var address = $('.address').val();
		var province_name = $("#province>option:selected").html();
		var city_name = $("#city>option:selected").html();
		var area_name = $("#area>option:selected").html();
		$.post("{:url('do_add')}", {
			province: province_name,
			city: city_name,
			region: area_name,
			number: code,
			name: named,
			tel: phone,
			time1: time1,
			address: address
		}, function (res) {
			if (res.status == 1) {
				location.href = "{:url('index')}";
			}
		})
	}
</script>